<style lang="scss">
.power-lists{
	.serach{
		position: fixed;
		top: 1rem;
		left: 0;
		right: 0;
		padding: 0.35rem;
		background: #fff;
		border-bottom: 1px solid #EEEEEE;
		.ser-back{
			border: 1px solid #EEEEEE;
			background: #f4f4f4;
			height: 0.6rem;
			line-height: 0.6rem;
			border-radius: 0.6rem;
			input{
				float: left;
				height: 0.6rem;
				line-height: 0.6rem;
				border-radius: 0.6rem;
				font-size: 0.3rem;
				color: #999;
				border: none;
				outline: none;
				width: 70%;
				text-indent: 0.25rem;
				background: transparent;
			}
			i{
				float: right;
				margin-top: 0.125rem;
				margin-right: 0.25rem;
				cursor: pointer;
				width: 0.325rem;
				height: 0.35rem;
				background: url(../../../static/img/serach-img.png) no-repeat;
				background-size: 100% 100%;
			}
		}
	}
	.text-mar{
		margin-top: 2.62rem;
	}
	.list-station{
		margin-top: 0.25rem;
		background: #fff;
		border: 1px solid #EEEEEE;
		border-left: none;
		border-right: none;
		padding: 0.25rem 0.375rem 0.3rem 0.375rem;
		text-align: left;
		display: flex;
		.tion-le{
			float: left;
			display: flex;
			justify-content:center;
			align-items: center;
			.le-padd{
				height: 1.675rem;
			}
			img{
				width: 1.7rem;
				height: 2.05rem;
			}
		}
		.tion-ri{
			float: left;
			margin-left: 0.45rem;
			p{
				font-size: 0.375rem;
				//height: 0.375rem;
				//line-height: 0.375rem;
				font-weight: bold;
				color: #333;
			}
			.text-is{
				margin-top: 0.1rem;
				font-size: 0;
				height: 0.5rem;
				line-height: 0.5rem;
			}
			.text-is:first-child{
				margin-top: 0.2rem;
			}
			span{
				font-size: 0.35rem;
				color: #666;
			}
		}
		.tion-lrs{
			float: right;
		}
	}
}
</style>
<template>
<div class="power-lists">
	<headTop :theRouter="therouter"></headTop>
	<div class="serach">
		<div class="ser-back fn-clear" >
			<input type="text" placeholder="请输入水电站名称进行搜索" v-model="hy_name">
			<i @click="search"></i>
		</div>
	</div>
	<div class="text-mar">
		<div class="list-station fn-clear" v-for="(item,index) in empList" :key="item.id" @click="dialogBtn(item)">
		<div class="tion-le">
			<div class="le-padd">
				<img :src="item.img_name">
			</div>
		</div>
		<div class="tion-ri">
			<p>{{item.hy_name}}</p>
			<div class="text-is">
				<span>所属河流：</span>
				<span>{{item.river_name}}</span>
			</div>
			<div class="text-is">
				<span>地理位置：</span>
				<span>{{item.com_locations}}</span>
			</div>
			<div class="text-is">
				<span>装机容量：</span>
				<span>{{item.com_capacity}}KW</span>
			</div>
		</div>
		<i class="tion-lrs"></i>
	</div>
	<infinite-loading @infinite="infiniteHandler">
		<span slot="no-more">没有更多了</span>
	</infinite-loading>
	</div>
	
</div>
</template>
<script>
import { BASEURL } from './../../api/api'
import axios from 'axios'
import headTop from "./../common/header"
import InfiniteLoading from 'vue-infinite-loading'
export default{
	name:'powerlists',
	components: { headTop , InfiniteLoading},
	data(){
		var img = require('./../../../static/img/no-img.png')
		return{
			empList:[],
			hy_name:'',
			areaCodeDz:'',
			listInfo:'',
			img:img,
			pageNo:1,
			pageSize:10
		}
	},
	computed: {
	    therouter: function() {
	      return this.$route
	    }
	},
	methods:{
		search(){
			let _this = this
			axios.get(BASEURL + 'getEmpList?hyName='+_this.hy_name+'&areaCode='+_this.areaCodeDz+'&pageNo=1&pageSize=1000',{
			}).then(function (res) {
				_this.empList = res.data.empList
				_this.empList.forEach(imgName=>{
				if(imgName.img_name === ''){
					imgName.img_name = _this.img
				}
			})
			}).catch(function (error) {
				console.log(error);
			})
		},
		infiniteHandler($state){
			let _this = this
			if(_this.listInfo.statu == 1){
				axios.get(BASEURL + 'getEmpList?hyName='+_this.listInfo.hyName+'&areaCode='+_this.listInfo.areaCode+'&pageNo='+_this.pageNo+'&pageSize=10',{
				})
				.then(function (res){
					if (res.data.empList.length) {
						_this.pageNo += 1;
						_this.empList.push(...res.data.empList)
						_this.empList.forEach(imgName=>{
							if(imgName.img_name === ''){
								imgName.img_name = _this.img
							}
						})
						$state.loaded();
					} else {
						$state.complete();
					}
				}).catch(function (error) {
					console.log(error);
				})
			}else{
				axios.get(BASEURL + 'getEmpList?hyName='+_this.hy_name+'&areaCode='+_this.areaCodeDz+'&pageNo='+_this.pageNo+'&pageSize=10',{
				}).then(function (res){
					if (res.data.empList.length) {
						_this.pageNo += 1;
						_this.empList.push(...res.data.empList)
						_this.empList.forEach(imgName=>{
							if(imgName.img_name === ''){
								imgName.img_name = _this.img
							}
						})
						$state.loaded();
					} else {
						$state.complete();
					}
				}).catch(function (error) {
					console.log(error);
				})
			}
			
		},
		dialogBtn(item){
			let _this = this
			_this.$store.commit('saveHyCode', item.hy_code);
			_this.$router.push({ path: '/' + 'powerdialog', force: true });
		}
	},
	mounted(){
		let _this = this
		_this.areaCodeDz = this.$store.state.areaCodeDz
		_this.listInfo = this.$store.state.listInfo
	}
}
</script>